<template>
  <el-dialog
    title="修改用户"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    :close-on-click-modal="false"
    class="vc-dialog-form"
    width="480px"
  >
    <forms ref="editForm" :formConfig="formConfig" @change="changeData" />

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" :disabled="disabled" @click="save"
        >保存</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { validateInput } from '@/utils/validator'

export default {
  name: 'editUser',
  props: ['dialogVisible', 'entity'],
  data () {
    return {
      formConfig: {
        items: [
          {
            title: '用户名',
            key: 'username',
            disabled: true
          },
          {
            title: '昵称',
            key: 'nickname',
            maxlength: 10,
            required: true,
            message: '请输入昵称'
          },
          {
            title: '用户类型',
            key: 'type',
            type: 'select',
            group: this.$store.state.dic.listFormat['yhlx'],
            required: true,
            message: '请选择用户类型'
          },
          {
            title: '用户状态',
            key: 'state',
            type: 'select',
            group: this.$store.state.dic.listFormat['yhzt'],
            required: true,
            message: '请选择用户状态'
          },
          {
            title: '用户性质',
            key: 'nature',
            type: 'select',
            group: this.$store.state.dic.listFormat['yhxz'],
            required: true,
            message: '请选择用户性质',
            change: this.changeNature
          },
          {
            title: '有效时长',
            key: 'effectiveMonths',
            type: 'select',
            show: () => { return true },
            group: this.$store.state.dic.listFormat['effective_time'],
            required: true,
            message: '请选择有效时长'
          }
        ],
        params: {
          username: '',
          nickname: '',
          cipherCode: '',
          type: '',
          state: '',
          nature: '',
          effectiveMonths: ''
        }
      },
      disabled: false,
      currData: {}
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) return
      this.disabled = false
    },
    entity: {
      handler (val) {
        this.currData = this.formConfig.params = JSON.parse(JSON.stringify(this.entity))
        this.changeNature(this.entity.nature)
        this.$nextTick(() => { this.$refs.editForm && this.$refs.editForm.clearValidate() })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 保存
     */
    save () {
      if (this.disabled) {
        return
      }
      this.$refs.editForm.save(() => {
        this.disabled = true
        this.$api.updateUser({
          data: this.formConfig.params
        }).then(res => {
          if (!res.success) {
            this.disabled = false
            return
          }
          this.$emit('close', res.data || {})
          this.$notifyBox('保存成功', 'success')
        }).catch(() => {
          this.disabled = false
        })
      })
    },
    /**
     * 取消
     */
    cancel () {
      this.$emit('close', false)
    },
    /**
     * 表单数据改变事件
     */
    changeData (data) {
      this.currData = JSON.parse(JSON.stringify(data))
    },
    /**
     * '用户性质'改变事件
     */
    changeNature (val) {
      let isShow = val === this.GLOBAL.CONSTANTS.DEFAULT_USER_NATURE
      this.formConfig.items[5].show = () => { return isShow }
      Object.assign(this.formConfig.params, this.currData, {
        nature: val,
        effectiveMonths: isShow ? this.GLOBAL.CONSTANTS.DEFAULT_USER_EFFECT_MON : ''
      })
      this.$forceUpdate()
    }
  }
}
</script>
